<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <title>小班课详情</title>
    <div data-th-replace="layout/head"></div>
</head>
<body>
<header class="bar scHeader-bar hide">
    <a class="button button-link button-nav pull-left goBack" href="javascript:history.back()">
        <span class="iconfont icon-fanhui"></span>
    </a>
    <h1 class="title title-white">小班课详情</h1>
    <a class="button button-link button-nav pull-right" href="javascript:void(0);">
        <span class="icon iconfont icon-fenxiang mr5"></span>
    </a>
</header>

<div style="display: none">
    <input type="hidden" id="courseId" th:value="${course['id']}"/>
    <!--当前播放节点的资源类型-->
    <input type="hidden" id="materialTypeKey"/>
    <input type="hidden" id="price" th:value="${course['realPrice']}"/>
    <input type="hidden" id="buyStatus" th:value="${course['courseBuyStatus']['buy']}"/>
    <input type="hidden" id="playId" th:value="${catalogId}"/>
    <input type="hidden" id="course-summary" th:value="${course['summary']}" />
    <input type="hidden" id="courseImg" th:value="${course['imageMap']['mobileUrlMap']['large']}" />
</div>
<!--menu begin-->
<nav class="bar bar-tab course-info-bar-tab">
    <a class="tab-item external active" th:href="${serviceMap['type']}==2?'tel:'+${serviceMap['context']}:'javascript:void(0);'"  th:classappend="(${serviceMap['type']}==1 or ${serviceMap['type']}==null  or ${serviceMap['type']}=='')?'online-consultation':''" th:attrappend="data-course=${serviceMap['context']}" style="display: table-cell !important;" href="javascript:void(0);">
        <span class="icon icon-phone vam" style="font-size: 0.92rem;"></span>
        <span class="tab-label vam">在线咨询</span>
    </a>
    <!--<a class="tab-item external" id="c-dashang-btn" href="javascript:;">
        <span class="icon icon-gift"></span>
        <span class="tab-label">打赏</span>
    </a>-->
    <th:block th:if="(${course['status']}==2   or ${course['status']}==3) and !${course['courseBuyStatus']['buy']} ">
        <a class="tab-item external cInfo-price-bx"  th:attrappend="data-type=${course['status']},data-buytype=${course['courseBuyStatus']['buy']}" id="abandoned">
            <span th:text="'课程已下架'" class="fs7"></span>
        </a>
    </th:block>

    <th:block th:if="${course['status']}==5   and !${course['courseBuyStatus']['buy']} ">
        <a class="tab-item external cInfo-price-bx"  th:attrappend="data-type=${course['status']},data-buytype=${course['courseBuyStatus']['buy']}">
            <span class="fs7">课程已停售</span>
        </a>
    </th:block>

    <th:block th:if="${course['status']}==4   and !${course['courseBuyStatus']['buy']} ">
        <a class="tab-item external cInfo-price-bx"  th:attrappend="data-type=${course['status']},data-buytype=${course['courseBuyStatus']['buy']}" >
            <span class="fs7">课程已售罄</span>
        </a>
    </th:block>

    <th:block th:if="!(${course['status']}==2  or ${course['status']}==3  or ${course['status']}==4 or ${course['status']}==5)">
        <a th:if="${course['courseBuyStatus']['buyBut']}" id="c-sign-up-btn" class="tab-item external cInfo-price-bx" href="javascript:void(0);">
            <span class="fs4">￥</span>
            <span th:text="${course['realPrice']}"></span>
            <span class="fs7"> 立即报名</span>
        </a>

        <a th:if="!${course['courseBuyStatus']['buyBut']} and ${course['courseBuyStatus']['freeBuyBut']}" id="free-order" th:attr="data-paytype=${course['courseBuyStatus']['payType']}" class="tab-item external cInfo-price-bx" href="javascript:void(0);">
            <span class="fs7"> 免费报名</span>
        </a>
        <a th:if="!${course['courseBuyStatus']['buyBut']} and ${course['courseBuyStatus']['memberBut']}" class="tab-item external cInfo-price-bx" th:href="@{/mobile/uc/member/queryAllMemberList}">
            <i class="icon iconfont icon-zuanshi" style="font-size: .8rem;line-height: 0;"></i>
            <div style="display: inline-block;text-align: left;">
                <span style="font-size: .8rem">会员课程</span>
                <p class="fs6" style="margin: 0;color: #FED6D6;">立即开通学习</p>
            </div>
        </a>
    </th:block>
    <a style="display: none;" class="tab-item external active" id="c-share-btn" href="javascript:void(0);">
        <span class="icon icon-share"></span>
        <span class="tab-label">分享</span>
    </a>
    <a class="tab-item external active" style="display: none;" id="qa-teacher-btn">
        <span class="icon icon-friends"></span>
        <span class="tab-label">向讲师提问</span>
    </a>
    <a id="c-comment-btn" style="display: none;" data-eval="只能评论正在学习的课程" class="tab-item external active" href="javascript:void(0);">
        <span class="icon icon-message"></span>
        <span class="tab-label">反馈评分</span>
    </a>
</nav>
<!--menu end-->
<!--主体区域 开始-->
<div class="content wm-content">
    <div class="course-play__wrap live-play__wrap">
        <div class="scLive-play-bx">
            <div class="course-play-bg smallClass-banner"></div>
            <video id="courseVideoPlayer" class="hide" width="100%" height="100%" webkit-playsinline="true" x5-playsinline="" playsinline="true" preload="true" x-webkit-airplay="allow" autobufer="true" autoplay="true" isrotate="false" autoHide="true" controls="controls"></video>
            <!--加载播放器播放前显示-->
            <div  th:style="'background-image: url('+(!${#maps.isEmpty(course['imageMap'])} and !${#maps.isEmpty(course['imageMap']['mobileUrlMap'])} and !${#strings.isEmpty(course['imageMap']['mobileUrlMap']['large'])} ?${course['imageMap']['mobileUrlMap']['large']}:'')+')'" class="course-play-bg"></div>

            <div class="live-cp-shadow">
                <a class="button button-link button-nav pull-left goBack mt5" href="javascript:history.back()">
                    <span class="icon iconfont icon-fanhui c-bbb"></span>
                </a>
                <span class="button button-link cInfoShare-btn button-nav pull-right mt5">
                <i class="icon iconfont icon-liwu vam"></i><span class="vam">邀请好友</span>
            </span>
            </div>
            <aside class="live-play-title">
                <h3 class="ellipsis" th:text="${course['courseName']}">——</h3>

                    <div class="pull-left" >
                        <span class="fs6 vam" id="newTeacherName">最近授课：暂无讲师</span>
                        <span class="fs4 vam ml5 mr5">|</span>
                    </div>
                    <div class="pull-left hide" id="assistant" >
                        <span class="fs6 vam" id="newAssistantName">最近助教：李小式</span>
                        <span class="fs4 vam ml5 mr5">|</span>
                    </div>
                <span class="fs6 vam" th:if="!${course['inventoryIsFull']}" th:text="'剩'+(${course['buyNum']}-${course['courseProfile']['buyCount']})+'个名额'">  </span>
                <span class="fs6 vam " th:if="${course['inventoryIsFull']}">名额已满</span>
            </aside>
        </div>
    </div>
    <article class="live-cont__wrap">
        <div class="scMenu-card pr">
            <div class="wm-buttons-tab__wrap">
                <div class="buttons-tab wm-buttons-tab" id="header-nav">
                    <a href="javascript:;" data-id="scSetting" class="button active">详设</a>
                    <a href="javascript:;" data-id="scMenu" class="button">大纲</a>
                    <a href="javascript:;" data-id="scComment" class="button">评论</a>
                    <a href="javascript:;" data-id="scInfo" class="button">介绍</a>
                </div>
            </div>
        </div>
        <div class="wp-live card" id="scSetting">
            <section class="no-gutter wl-live-left">
                <div class="wp-live-txt__wrap ellipsis" data-space-between="10">
                    <em class="latest-live-ico"></em>
                    <div class="latest-live-line"></div>
                    <ul id="wp-live-txt__ul" class="swiper-wrapper">
                        <li th:if="!${#maps.isEmpty(course['liveCourseCatalog'])}" th:attrappend="data-id=${course['liveCourseCatalog']['id']},data-course=${course['id']}" class="swiper-slide now-live-box">
                            <section class="row">
                                <section class="col-66">
                                    <span class="ellipsis" th:text="${course['liveCourseCatalog']['catalogName']}"></span>
                                    <span>
                                            <th:block th:text="${#strings.substring(course['liveCourseCatalog']['lessonStartTime'],5,7)} + '月'"></th:block><th:block th:text="${#strings.substring(course['liveCourseCatalog']['lessonStartTime'],8,10)}"></th:block><th:block th:if="!${#strings.equals(#strings.substring(course['liveCourseCatalog']['lessonStartTime'],8,10),#strings.substring(course['liveCourseCatalog']['lessonEndTime'],8,10))}" th:text="${#strings.substring(course['liveCourseCatalog']['lessonEndTime'],7,10)}"></th:block>日
                                             <th:block th:text="${#strings.substring(course['liveCourseCatalog']['lessonStartTime'],11,16)}"></th:block>
                                            -<th:block th:text="${#strings.substring(course['liveCourseCatalog']['lessonEndTime'],11,16)}"></th:block>
                                        </span>
                                </section>
                                <section class="col-33 text-right">
                                    <button th:if="${course['liveCourseCatalog']['livePlayState']}==1" class="button button-fill button-round button-danger watch-live">看直播</button>
                                    <button th:if="${course['liveCourseCatalog']['livePlayState']}==2" class="button button-fill button-round button-success watch-live">未开始</button>
                                    <button th:if="${course['liveCourseCatalog']['livePlayState']}==3 and ${course['liveCourseCatalog']['replay']} !=1" class="button button-fill button-round disabled watch-live">已结束</button>
                                    <button th:if="${course['liveCourseCatalog']['livePlayState']}==3 and ${course['liveCourseCatalog']['replay']} ==1" class="button button-fill button-round disabled watch-live">看回放</button>
                                    <button th:if="${course['liveCourseCatalog']['livePlayState']}==4" class="button button-fill button-round button-success watch-live">提前进入</button>
                                </section>
                            </section>
                        </li>
                        <li th:if="${#maps.isEmpty(course['liveCourseCatalog'])}" class="swiper-slide">
                            <section class="row">
                                <section class="col-66">
                                    <span class="ellipsis">暂无直播，后续期待...</span>
                                    <span>—</span>
                                </section>
                                <section class="col-33 text-right">
                                    <button class="button button-fill button-round disabled watch-live">无直播</button>
                                </section>
                            </section>
                        </li>
                    </ul>
                </div>
            </section>
        </div>
        <div class="mt5">
            <div class="pl75 pr75">
                <div class="clearfix ">
                    <aside class="pull-left">
                        <span class="free-tag ml5" th:if="!${course['inventoryIsFull']}" th:text="'还剩'+(${course['buyNum']}-${course['courseProfile']['buyCount']})+'个名额'"></span>
                        <span class="free-tag ml5 " th:if="${course['inventoryIsFull']}">名额已满</span>
                    </aside>
                    <aside class="pull-right">
                        <th:block th:if="${course['courseBuyStatus']['buyBut']}" >
                            <s class="fs4 c-bbb" th:text="'￥'+${course['orPrice']}">00.0</s>
                            <span class="c-red">
                                <small class="fs4">￥</small><strong class="fs10" th:text="${course['realPrice']}">00.0</strong>
                            </span>
                        </th:block>
                        <span class="c-green" th:if="!${course['courseBuyStatus']['buyBut']} and ${course['courseBuyStatus']['freeBuyBut']} and ${course['limitDay']}>0">
                            <small class="fs8" >免费报名</small>
                        </span>
                    </aside>
                </div>
                <section>
                    <span class="fs6">授课周期：</span>
                    <span class="fs6" th:text="${#strings.substring(course['openTime'],0,16)}+' 至 '+${#strings.substring(course['endTime'],0,16)}"></span>
                </section>
                <section class="clearfix">
                    <aside class="pull-left">
                        <span class="c-333 fs4">共<span th:text="${course['nodeNum']}">17</span>讲</span>
                        <span class="c-red ml5 fs4" th:if="${course['limitDate']}!=null and ${course['limitDay']}>=0  " th:text="'距离停售还有'+(${course['limitDay']}+1)+'天'">距离停售还有3天</span>
                        <span class="c-red ml5 fs4" th:if=" ${course['limitDate']}!=null and  ${course['limitDay']}<0 " >此课已停售，请关注其它</span>
                    </aside>
                </section>
                <div>
                    <div class="mt5 fs4">
                        <span class="c-888">有效期：</span>
                        <span class="c-333">自购买之日起 </span>
                        <span class="c-red" th:text="${course['validDay']}">100</span>
                        <span class="c-333"> 天内</span>
                    </div>
                    <div class="mt5 fs4">
                        <span class="c-888">更新至：</span>
                        <span class="c-333" th:if="${course['contextStatus']} == 1" id="last-update">暂无更新</span>
                        <span class="c-333" th:if="${course['contextStatus']} == 2">此课已全部完结</span>
                    </div>
                </div>
                <hr>
                <div>
                    <section>
                        <div class="row no-gutter">
                            <div class="col-auto">
                                <span class="button button-tip-bx button-tip-warning-bx" style="opacity: .8;">服务</span>
                            </div>
                            <div class="col-auto ml5">
                                <span class="fs6" th:text="${course['courseService']}">48小时答疑 . 作业批改</span>
                            </div>
                        </div>
                        <div class="row no-gutter mt5">
                            <div class="col-15">
                                <span class="button button-tip-bx button-tip-warning-bx">活动</span>
                            </div>
                            <div class="col-80" id="activity-context-box">
                                <section>
                                    <span class="fs6">暂无活动</span>
                                </section>
                            </div>
                        </div>
                        <div class="row no-gutter mt5 coupon-box">
                            <div class="col-15">
                                <span class="button button-tip-bx button-tip-danger-bx">优惠</span>
                            </div>
                            <div class="col-60">
                                <section>
                                    <span class="c-red icon iconfont icon-youhuiquan fs8"></span>
                                    <span class="fs6 vam">点击进入领取优惠券</span>
                                </section>
                            </div>
                            <div class="col-20 text-right">
                                <a href="javascript:;" class="selectOpcardBtn c-888 fs6">
                                    <span class="vam">领券</span>
                                    <span class="vam icon icon-right fs4"></span>
                                </a>
                            </div>
                        </div>
                    </section>
                </div>
            </div>

            <div class="pt5">
                <div class="wp-live card" id="playAudition" th:attrappend="data-value=${course['audition']}">
                    <div class="row no-gutter wl-live-left sclassFree-play">
                        <aside class="col-10">
                            <span class="icon iconfont icon-zhibofuben"></span>
                        </aside>
                        <section class="col-60">
                            <aside><span class="fs8">免费试听</span></aside>
                            <span class="c-888 fs4">一览授课风采</span>
                        </section>
                        <section class="col-30 text-right">
                            <span class="vam icon icon-right fs4"></span>
                        </section>
                    </div>
                </div>
            </div>
            <!--目录大纲 开始-->
            <div class="mt5 pl75 pr75 pt5" id="scMenu">
                <section>
                    <span class="fs6 vam">| </span>
                    <span class="fs8 vam"> 课程大纲</span>
                </section>
                <section class="mt5 ml5">
                    <ul class="liveCatalog-List-bx show" id="live-course-catalog-box" ></ul>
                    <section class="mt5 text-center">
                        <a href="javascript:;" data-status="2" id="more-liveCatalog-btn">展开更多</a>
                    </section>
                </section>
                <hr>
            </div>
            <!--目录大纲 结束-->

            <div class="pl75 pr75" id="scComment">
                <section class="clearfix">
                    <aside class="pull-right">
                        <a  id="course-small-comment" class="fs4">更多评论</a>
                    </aside>
                    <aside class="pull-left">
                        <span class="fs6 vam">| </span>
                        <span class="fs8 vam"> 课程评论</span>
                    </aside>
                </section>
                <section class="mt5">
                    <ul id="course-comment-list" class="list-container wm-question-list__wrap facebook-card">
                    </ul>
                </section>
                <hr>
            </div>
            <div class="mt5 pl75 pr75 pt5 pb5 mb5" id="scInfo">
                <div>
                    <section>
                        <span class="fs6 vam">| </span>
                        <span class="fs8 vam"> 授课讲师</span>
                    </section>
                    <section class="mt5">


                        <section class="clearfix">
                            <th:block th:if="${!#lists.isEmpty(course['teacherList'])}" >
                                <div class="pull-left" th:each="teacher,index:${course['teacherList']}">
                                    <div class="teacher-pic__wrap">
                                        <img class="wm-img" th:alt="${teacher['teacherName']}"   th:attr="data-src=${teacher['imageMap']['mobileUrlMap']['large']}" th:attrappend="src=@{{path}/front/mobile/v3/img/default/default-face.jpg(path=${staticPath})}"  >
                                    </div>
                                    <section class="fs4 c-666 text-center">
                                        <span>授课</span>
                                        <br>
                                        <span th:text="${teacher['teacherName']}"></span>
                                    </section>
                                </div>
                            </th:block>
                            <div class="pull-left" th:if="${#lists.isEmpty(course['teacherList'])}">
                                <div class="teacher-pic__wrap">
                                    <img class="wm-img"    src="https://fimage.268xue.com/upload/0/yzl/common/2019032003/97711618680b4b9f283c000095b69a2a_jpg/mobile/large.jpg"  >
                                </div>
                                <section class="fs4 c-666 text-center">
                                    <span>授课</span>
                                    <br>
                                    <span>暂无讲师</span>
                                </section>
                            </div>
                            <th:block th:if="${!#lists.isEmpty(course['assistantList'])}">
                                <div class="pull-left"  th:each="teacher,index:${course['assistantList']}">
                                    <div class="teacher-pic__wrap">
                                        <img class="wm-img" th:alt="${teacher['teacherName']}"   th:attr="data-src=${teacher['imageMap']['mobileUrlMap']['large']}"   src="https://fimage.268xue.com/upload/0/yzl/common/2019032003/97711618680b4b9f283c000095b69a2a_jpg/mobile/large.jpg"  >
                                    </div>
                                    <section class="fs4 c-666 text-center">
                                        <span>助教</span>
                                        <br>
                                        <span th:text="${teacher['teacherName']}"></span>
                                    </section>
                                </div>
                            </th:block>
                        </section>
                    </section>
                </div>
                <hr>
                <div>
                    <section>
                        <span class="fs6 vam">| </span>
                        <span class="fs8 vam"> 课程介绍</span>
                    </section>
                    <section class="mt5" id="details" th:utext="${course['details']}">
                    </section>
                </div>
            </div>
        </div>
    </article>
</div>

<!--反馈评分 Popup 开始-->
<div class="popup popup-about feedbackPopup">
    <header class="bar bar-nav">
        <button class="button button-link button-nav pull-left close-popup" id="course-comment-close">
            <span class="iconfont icon-guanbi ml5"></span>
        </button>
        <button class="button button-link button-nav pull-right" id="course-submit-feedback">
            <span class="mr5">提交</span>
        </button>
        <h1 class="title">反馈评分课程</h1>
    </header>
    <div class="content">
        <div class="content-padded feedbackPopup-bx pl5 pr5">
            <section class="mt5 pt5">
                <header class="card-header">
                    <span class="c-333">课程质量</span>
                    <small class="c-bbb fs4">你觉得课程播放时是否足够流畅清晰，体验顺畅</small>
                </header>
                <div class="zp-range__wrap">
                    <input id="quality" type="hidden" class="zp-range-single-slider" value="50"/>
                </div>
            </section>
            <section class="mt5 pl5 pr5 pt5">
                <header class="card-header">
                    <span class="c-333">老师讲法</span>
                    <small class="c-bbb fs4">你觉得老师讲是否做到重点突出，简直明了</small>
                </header>
                <div class="zp-range__wrap">
                    <input id="teach" type="hidden" class="zp-range-single-slider" value="50"/>
                </div>
            </section>
            <section class="mt5 pl5 pr5 pt5">
                <header class="card-header">
                    <span class="c-333">综合感受</span>
                    <small class="c-bbb fs4">我对这节课的综合感受</small>
                </header>
                <div class="zp-range__wrap">
                    <input id="feel" type="hidden" class="zp-range-single-slider" value="50"/>
                </div>
            </section>
            <section class="mt5 pl5 pr5 pt5">
                <header class="card-header">
                    <span class="c-333">偶尔吐槽</span>
                    <small class="c-bbb fs4">我还有其它话要说，别拦我</small>
                </header>
                <div class="mt5">
                    <textarea id="comment" class="feedback-txtarea" placeholder="别憋着，说两句~~~"></textarea>
                </div>
            </section>
        </div>
    </div>
</div>
<!--反馈评分 Popup 结束-->

<!--随堂练习 对话框内容 开始-->
<textarea id="c-classTest-ele" class="hide">
        <div class="text-center pr pt5 pb5">
            <aside class="c-classTest-icon"><span>&nbsp;</span></aside>
            <h3 class="pt5" style="margin-bottom: 0;font-weight: 200;">即将进入随堂练习</h3>
            <span class="fs7 c-bbb">本次练习共</span>
            <span class="fs7 c-blue">5</span>
            <span class="fs7 c-bbb">题</span>
        </div>
    </textarea>
<!--随堂练习 对话框内容 结束-->


<!-- 浏览直播 -->
<div class="popup popup-about course-live-read-popup">
    <header class="bar bar-nav">
        <button class="button button-link button-nav pull-left close-popup" id="course-live-close">
            <span class="iconfont icon-guanbi ml5"></span></button>
        <h1 class="title">直播室</h1>
    </header>

    <div class="content">
        <div style="height: 100%" id="course-live-container">

        </div>
    </div>
</div>


<div class="popup popup-about course-small-read-popup">
    <header class="bar bar-nav">
        <button class="button button-link button-nav pull-left close-popup" id="course-live-close">
            <span class="iconfont icon-guanbi ml5"></span></button>
        <h1 class="title">课程评论</h1>
    </header>

    <div class="content">
        <div class=" content">
            <div class="page-group">
                <div id="page-infinite-scroll-bottom" class="page page-current course-comment__wrap">
                    <div class="content infinite-scroll native-scroll" data-type='native' data-distance="100">
                        <div class="wm-title__wrap card-header mt5">
                            <span class="fs8 c-333" id="course-comment-count">全部评价(0)</span>
                        </div>
                        <article class="">
                            <div class="list-block no-mt">
                                <ul id="course-small-comment-list" class="list-container wm-question-list__wrap facebook-card">
                                </ul>
                            </div>
                        </article>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>






<div data-th-replace="layout/footer"></div>
<script th:src="@{{path}/front/mobile/business/order/goods/gen-free-order.js?v={v}(path=${staticPath},v=${v})}"></script>
<script th:src='@{{path}/front/mobile/libs/swiper/swiper.min.js?v={v}((path=${staticPath}, v=${v})}' charset="utf-8"></script>
<script th:src="@{{path}/front/mobile/business/course/course-info-coupon.js?v={v}(path=${staticPath},v=${v})}" charset="utf-8"></script>
<script th:src="@{{path}/front/mobile/business/course/comment/course-comment.js?v={v}(path=${staticPath},v=${v})}" charset="utf-8"></script>
<script th:src="@{{path}/front/mobile/business/course/play/course-play.js?v={v}(path=${staticPath},v=${v})}"></script>
<script th:src="@{{path}/front/mobile/business/course/play/load-html.js?v={v}(path=${staticPath},v=${v})}"></script>
<script th:src="@{{path}/front/mobile/business/course/smallClass/smallClass-info.js?v={v}(path=${staticPath},v=${v})}" charset="utf-8"></script>
<script th:inline="javascript" type="text/javascript">
    $(function () {
        //最近多直播向上滚动方法
        upScroll('.wp-live-txt__wrap');
    });
    var courseTypeKey = [[${course['courseTypeKey']}]];
    var status = [[${course['status']}]];
    var courseId = [[${course['id']}]];
    var initCatalogId = [[${catalogId}]];
</script>
</body>
</html>